// pages/bill/add/index.ts
import {
  getManageUser,
  saveBill,
  getBillInfo,
  updateBill
} from '@/api/bill/index'
import { debounce } from '@/utils/index'
Page({
  /**
   * 页面的初始数据
   */
  data: {
    formHeight: 0, // 表单高度
    username: '', // 用户名
    filterUserList: [], // 用户列表
    memberIds: [], // 选中的用户id
    name: '', // 账单名称
    remark: '', // 备注
    id: null,
    userList: []
  },
  getFormHeight() {
    wx.createSelectorQuery()
      .selectAll('.bill-form')
      .boundingClientRect((rect: any) => {
        this.setData({ formHeight: rect[0].height })
      })
      .exec()
  },
  // 获取筛选用户
  getFiterUser: debounce(function (e: WechatMiniprogram.CustomEvent<any>) {
    const value = e.detail
    this.setData({ username: value })
    getManageUser(value).then((res) => {
      this.setData({ filterUserList: res.data })
    })
  }, 600),
  // 选择用户
  onFilterUserChange(e: WechatMiniprogram.CustomEvent) {
    const { id, exist } = e.currentTarget.dataset
    if (exist) return
    const memberIds = this.data.memberIds
    const index = memberIds.indexOf(id)
    if (index === -1) {
      memberIds.push(id)
    } else {
      memberIds.splice(index, 1)
    }
    this.setData({ memberIds })
  },
  // 保存账单
  handleSaveTap() {
    wx.$modal('是否确认保存账单？').then(() => {
      const { id, name, remark, memberIds } = this.data
      if (!name) return wx.$toast('请输入账单名称')
      const fn = id ? updateBill : saveBill
      fn({ name, remark, memberIds, id }).then(() => {
        wx.$toast('保存成功')
        wx.navigateBack()
      })
    })
  },
  // 获取账单信息
  getBillInfo() {
    const { id } = this.data
    getBillInfo(id).then((res) => {
      const { name, remark, userList } = res.data
      this.setData({ name, remark, userList })
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(e) {
    const { id } = e
    if (!id) return
    this.setData({ id })
    this.getBillInfo()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    this.getFormHeight()
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {}
})
